<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>el和data的两种写法</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
<!-- 准备好 一个容器-->
<div id="root">
  <h1>你好,{{name}}</h1>
</div>
<!--
       data与el的2中写法：
        1.el 的2种写法：
            1.new Vue 的时候直接配置el属性
            2.先创建Vue实例，随后再通过vm.$mount('#root') 来指定el的值
        2.data有2种写法
            1.对象式
            2.函数式
            如何选择： 目前那种写法都可以，但在组件中必须使用函数式，否则就会报错
        3.一个很重要的原则
            由Vue管理的函数，一定不要写箭头函数，否则 this将不是Vue实例
-->

</body>

<script type="text/javascript">

  Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

  //创建Vue实例
  // const v = new Vue({
  //   el:'#root',
  //   data:{
  //     name: '世界'
  //   }
  // });
  // v.$mount('#root')

  new Vue({
    el:'#root',
    // data:{
    //   name:'shijie'
    // }

    data:function (){
      console.log('@@@',this) //此处的this 是Vue的实例对象
      return{
        name:'shije'
      }
    }
  })
  // console.log(v);




</script>


</html>
